<!-- 简单清单表单组件 -->
<template>
  <view class="simple-list-form">
    <view class="form-header">
      <text class="form-title">{{ isEdit ? '编辑清单' : '新建清单' }}</text>
      <view class="close-btn" @click="onCancel">
        <text class="close-icon">×</text>
      </view>
    </view>
    
    <view class="form-content">
      <!-- 清单名称输入框 -->
      <view class="form-item">
        <text class="form-label">清单名称</text>
        <input 
          class="form-input" 
          v-model="formData.title" 
          placeholder="请输入清单名称"
          maxlength="20"
          @blur="validateTitle"
        />
        <text class="error-tip" v-if="errors.title">{{ errors.title }}</text>
      </view>
      
      <!-- 图标选择器 -->
      <view class="form-item">
        <text class="form-label">清单图标</text>
        <view class="icon-selector">
          <view 
            v-for="(icon, index) in iconList" 
            :key="index"
            class="icon-item" 
            :class="{'icon-item-active': formData.icon === icon}"
            :style="{'background-color': getIconColor(icon)}"
            @click="selectIcon(icon)"
          >
            <u-icon :name="icon" size="18" color="#ffffff"></u-icon>
          </view>
        </view>
      </view>
    </view>
    
    <view class="form-footer">
      <button class="cancel-btn" @click="onCancel">取消</button>
      <button class="submit-btn" @click="submitForm">{{ isEdit ? '保存修改' : '创建清单' }}</button>
    </view>
  </view>
</template>

<script>
import { IconSystem } from '@/utils/constants.js';

export default {
  name: 'SimpleListForm',
  props: {
    // 编辑模式下传入的清单数据
    listData: {
      type: Object,
      default: () => ({})
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        title: '',
        icon: 'file-text'
      },
      errors: {
        title: ''
      },
      // 使用IconSystem中的图标列表和颜色
      iconList: IconSystem.iconList,
      iconColors: IconSystem.iconColors
    };
  },
  created() {
    // 如果是编辑模式，初始化表单数据
    if (this.isEdit && this.listData) {
      this.formData.title = this.listData.title || '';
      // 使用图标名称而不是emoji
      this.formData.icon = this.listData.icon || 'file-text';
    }
  },
  methods: {
    // 选择图标
    selectIcon(icon) {
      this.formData.icon = icon;
    },
    
    // 获取图标颜色，使用IconSystem
    getIconColor(icon) {
      return IconSystem.getIconColor(icon);
    },
    
    // 验证标题
    validateTitle() {
      if (!this.formData.title.trim()) {
        this.errors.title = '请输入清单名称';
        return false;
      } else if (this.formData.title.length > 20) {
        this.errors.title = '清单名称不能超过20个字符';
        return false;
      } else {
        this.errors.title = '';
        return true;
      }
    },
    
    // 提交表单
    submitForm() {
      if (!this.validateTitle()) {
        return;
      }
      
      const listData = {
        title: this.formData.title,
        icon: this.formData.icon
      };
      
      // 如果是编辑模式，添加ID
      if (this.isEdit && this.listData && this.listData.id) {
        listData.id = this.listData.id;
      }
      
      this.$emit('submit', listData);
    },
    
    // 取消操作
    onCancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style lang="scss" scoped>
.simple-list-form {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  max-width: 600rpx;
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.form-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.close-icon {
  font-size: 24px;
  color: #999;
}

.form-content {
  padding: 15px;
  max-height: 60vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 10px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

.error-tip {
  font-size: 12px;
  color: #ff4d4f;
  margin-top: 5px;
}

.icon-selector {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}

.icon-item {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
  }
}

.icon-item-active {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.form-footer {
  padding: 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.submit-btn {
  flex: 3;
  height: 40px;
  background-color: #4285f4;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(66, 133, 244, 0.3);
}

.cancel-btn {
  flex: 2;
  height: 40px;
  background: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  margin-right: 10px;
}
</style> 